 <template>
  <!-- @close="" 监听关闭  @open="" 监听打开  -->
  <el-dialog v-loading="loading" title="分配角色" :visible="showRoleDialog" @close="handleClose" @open="handleOpen">
    <!-- 角色列表弹窗***************** -->
    <div>角色列表</div>
    <el-checkbox-group v-model="selectedList">
      <!-- 遍历 checkbox多选框, 因为后台要的是数据是id,  label负责展示跟后台数据, 解决方法, 让label绑定后台需要的数据, 然后用插值覆盖来显示想要显示在网页的数据 -->
      <el-checkbox v-for="obj in roleList" :key="obj.id" :label="obj.id">
        {{ obj.name }}
      </el-checkbox>
    </el-checkbox-group>
    <template #footer>
      <el-button type="primary" size="small" @click="handleSubmit">确定</el-button>
      <el-button size="small" @click="handleClose">取消</el-button>
    </template>
  </el-dialog>
</template>
<script>
// 发送请求获取角色列表
import { reqGetRoleList } from '@/api/setting.js'
// 获取用户本来就有的角色信息
import { getDetailInfo } from '@/api/user'
// 分配角色接口 提交***************
import { reqAssignRoles } from '@/api/employees'
export default {
  name: 'AssignRole',
  // 接收父亲传来的值
  props: {
    // 获取父亲-控制弹出层的显示与隐藏
    showRoleDialog: {
      type: Boolean,
      required: false
    },
    // 获取父亲-点击当前员工 的角色按钮 id
    currentUserId: {
      type: String,
      required: true
    }

  },
  data () {
    return {
      // 角色列表
      roleList: [],

      // 复选框, 选中的列表
      selectedList: [],

      // loading效果
      loading: false
    }
  },
  methods: {
    // 点击取消按钮跟弹出层关闭时执行
    handleClose () {
      // 让父亲关闭弹窗
      this.$emit('update:showRoleDialog', false)
    },
    // 弹出层被打开时执行*****
    handleOpen () {
      // 异步获取↓  (速度更快)**********
      this.loading = true // 让loading效果打开
      // 调用接口获取所有的角色列表
      const ret1 = reqGetRoleList({ page: 1, pagesize: 10000 })
      // 获取用户本来拥有的角色
      const ret2 = getDetailInfo(this.currentUserId)
      // 并发触发多个异步任务，Promise.all保证所有任务返回后得到所有的异步结果(返回值是数组)
      Promise.all([ret1, ret2]).then(result => {
        this.roleList = result[0].data.rows // 得到所有的角色列表
        this.selectedList = result[1].data.roleIds || [] // 得到用户本来拥有的角色(如果后台返回null,程序就会出现问题, 所以加 || [] ,如果为null 就赋值一个空数组)
      }).catch(() => {
        this.$message.error('获取角色信息失败')
      }).finally(() => {
        this.loading = false
      })

      // 同步获取(速度慢)
      // // 调用接口获取后台所有的角色列表时
      // const ret = await reqGetRoleList({ page: 1, pagesize: 10000 })
      // console.log(ret)
      // if (ret.code === 10000) {
      //   this.   roleList = ret.data.rows // 将获取到的列表数据保存
      // } else {
      //   this.$message.error(ret.message)
      // }

      // // 获取用户本来就有的角色信息
      // const ret1 = await getDetailInfo(this.currentUserId)
      // console.log(ret1)
      // if (ret.code === 10000) {
      //   this.selectedList = ret1.data.roleIds// 将获取到的被选中列表数据保存
      // } else {
      //   this.$message.error(ret.message)
      // }
    },

    // 点击确定执行
    async handleSubmit () {
      const ret = await reqAssignRoles({
        id: this.currentUserId, // 用户id
        roleIds: this.selectedList // 选中的角色列表
      })
      console.log(ret)
      if (ret.code === 10000) {
        this.$message.success(ret.message)
        this.handleOpen // 刷新数据
        this.$emit('update:showRoleDialog', false) // 关闭弹出层
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.assign-role {
  ::v-deep {
    .el-checkbox {
      font-size: 30px;
    }
  }
}
</style>
